<template>
  <div class="table-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input v-model="queryForm.id" clearable placeholder="根据ID搜索" />
          </el-form-item>

          <el-form-item>
            <el-input v-model="queryForm.userName" clearable placeholder="请输入用户名" />
          </el-form-item>

          <el-form-item>
            <el-select v-model="queryForm.activeGroup" placeholder="请选择小组">
              <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="queryForm.type" placeholder="请选择获取类型">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="queryForm.week"
              type="week"
              format="yyyy 第 WW 周"
              placeholder="按周查询"
              @change="changeWeek"
            ></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
    </vab-query-form>

    <el-table
      border
      ref="tableSort"
      row-key="id"
      :expand-row-keys="expands"
      @expand-change="expandSelect"
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      :height="height"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-descriptions title="积分详细信息" :column="2" size="mini" border direction="vertical">
            <el-descriptions-item label="用户名">
              <el-tag size="small">
                <span>{{ props.row.userName }}</span>
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="分数获取类型">
              <el-tag size="small">
                <span>{{ getChangeType(props.row.changeType) }}</span>
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item v-if="props.row.changeType === 4" label="分享内容">
              <span class="contentText">{{ props.row.shareText }}</span>
            </el-descriptions-item>
            <el-descriptions-item v-if="props.row.changeType === 7" label="案例内容">
              <span class="contentText">{{ props.row.shareText }}</span>
            </el-descriptions-item>
            <el-descriptions-item v-if="props.row.changeType === 7" label="行为梳理">
              <span class="contentText">{{ props.row.behaviorText }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="备注">
              <span>{{ props.row.memo }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="分数">
              <div class="scoreBox">
                <el-tag size="small" v-show="!props.row.showbutton">
                  <div class="changeScoreBox">
                    <div :class="isNegative(props.row.changeScore) ? 'negative' : 'positive'">
                      {{ props.row.changeScore }}
                    </div>
                  </div>
                </el-tag>
                <!-- <div class="inputBox">
                  <el-input-number
                    v-show="props.row.showbutton"
                    v-model="props.row.changeScore"
                    :min="props.row.showbutton ? 0 : -1000"
                    :max="props.row.changeType === 4 ? 3 : 8"
                  ></el-input-number>

                  <div class="btnBox">
                    <el-button
                      type="primary"
                      v-show="props.row.changeType === 4 || props.row.changeType === 7"
                      @click="changeRowScore(props.row)"
                    >
                      {{ props.row.showbutton ? '保存' : '更改' }}
                    </el-button>
                    <el-button type="warning" v-show="props.row.showbutton" @click="props.row.showbutton = false">取消</el-button>
                  </div>
                </div> -->
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="相关任务时间">
              <el-tag size="small">
                <span>{{ props.row.taskClockTime }}</span>
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              <el-tag size="small">
                <span>{{ props.row.createTime }}</span>
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
              <el-tag size="small">
                <span>{{ props.row.updateTime }}</span>
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id" align="center" width="100" />
      <el-table-column label="用户名" prop="userName" align="center" show-overflow-tooltip width="200" />

      <el-table-column label="分数变更说明" prop="changeMemo" align="center" show-overflow-tooltip />
      <el-table-column label="分数获取类型" prop="changeType" align="center" show-overflow-tooltip>
        <template #default="{ row }">
          <el-tag
            :type="
              row.changeType === 3
                ? 'warning'
                : row.changeType === 7 || row.changeType === 4
                ? 'success'
                : row.changeType === 6
                ? 'danger'
                : ''
            "
            size="small"
          >
            <span>{{ getChangeType(row.changeType) }}</span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="分数" prop="changeScore" width="100">
        <template #default="{ row }">
          <div class="changeScoreBox">
            <div :class="isNegative(row.changeScore) ? 'negative' : 'positive'">
              {{ row.changeScore }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="memo" show-overflow-tooltip />
      <el-table-column label="相关任务时间" prop="taskClockTime" show-overflow-tooltip width="200" />
      <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip width="200" />
      <!-- <el-table-column align="center" label="操作" show-overflow-tooltip width="150">
        <template #default="{ row }">
           <el-button v-show="row.changeType === 4 || row.changeType === 7" size="mini" type="warning" @click="handleEdit(row)">
            分数修改
          </el-button>
          <el-button v-show="row.changeType === 7 && row.isSelectCase === 0" size="mini" type="primary" @click="Selected(row)">
            设为优秀案例
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.pageNum"
      :layout="layout"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <edit ref="edit" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import { SelActivitygroup, SetUserWeekScore, SetSelectedGreatCase } from '@/api/userManagement'
  import { GetUserScoreGetList } from '@/api/table'
  import Edit from './components/scoreEdit'

  export default {
    name: 'ComprehensiveTable',
    components: { Edit },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger',
        }
        return statusMap[status]
      },
    },
    data() {
      return {
        groupList: [{ id: 0, groupName: '全部小组' }],
        options: [
          {
            value: 0,
            label: '全部',
          },
          {
            value: 1,
            label: '管理员修改',
          },
          {
            value: 2,
            label: '用户打卡获取',
          },
          {
            value: 3,
            label: '用户补打获取',
          },
          {
            value: 4,
            label: '周报分享获取',
          },
          {
            value: 5,
            label: '小组讨论',
          },
          {
            value: 6,
            label: '每周未打卡扣分',
          },
          {
            value: 7,
            label: '分享案例',
          },
          {
            value: 8,
            label: '优秀案例加分',
          },
        ],
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        elementLoadingText: '正在加载...',
        queryForm: {
          id: '',
          week: '',
          userName: '',
          activeGroup: 0,
          type: 0,
          pageNum: 1,
          pageSize: 100,
        },
        timeOutID: null,
        expands: [],
        showBtnList: [],
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },
    watch: {
      showBtnList(newvel) {
        let box = this.list.find((item) => item.id === this.expands[0])
        if (box) {
          box.showbutton = false
        }
      },
    },
    async created() {
      let { data } = await SelActivitygroup({
        groupName: '',
      })
      this.groupList = [...this.groupList, ...data]

      this.queryForm.userName = this.$route.query.userName ? this.$route.query.userName : ''
      this.fetchData()
    },
    beforeDestroy() {
      clearTimeout(this.timeOutID)
    },
    mounted() {},
    methods: {
      changeWeek(e) {
        console.log(e)
      },
      //编辑
      handleEdit(row) {
        this.$refs['edit'].showEdit(row, this.groupList)
      },
      Selected(row) {
        this.$baseConfirm('确定选中当前项为优秀案例吗', null, async () => {
          const date = await SetSelectedGreatCase(row)
          if (date.code != 201) {
            this.$baseMessage(date.msg, 'success')
          }
          this.fetchData()
        })
      },
      expandSelect(row, expandedRows) {
        this.showBtnList = expandedRows
        this.expands = []
        if (expandedRows.length > 0) {
          row ? this.expands.push(row.id) : ''
        }
      },
      changeRowScore(row) {
        if (row.showbutton) {
          this.$baseConfirm('你确定要修改当前项吗', null, async () => {
            const { msg } = await SetUserWeekScore(row)
            this.$baseMessage(msg, 'success')

            this.fetchData()
          })
        } else {
          row.showbutton = true
        }
      },
      handleChange() {},
      isNegative(e) {
        return e < 0
      },
      getChangeType(e) {
        let found = this.options.find((item) => item.value === e)
        return found.label
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.pageNum = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        let box = Object.assign({}, this.queryForm)
        if (box.id === '') {
          box.id = 0
        }
        const { data } = await GetUserScoreGetList(box)

        this.list = data.records.map((item) => ({
          ...item,
          showbutton: false,
        }))

        this.total = data.total
        this.timeOutID = setTimeout(() => {
          this.listLoading = false
        }, 500)
      },
    },
  }
</script>
<style scoped lang="scss">
  .negative {
    font-weight: bold;
    color: $base-color-red;
  }
  .positive {
    font-weight: bold;
    color: $base-color-green;
  }
  .scoreBox {
    display: flex;
    align-items: center;
    .changeScoreBox {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .inputBox {
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .btnBox {
        display: flex;
        justify-content: space-between;
        ::v-deep .el-button {
          padding: 5px !important;
        }
      }
    }
  }

  ::v-deep .el-table {
    &__expanded-cell {
      padding: 0;
    }
    .el-descriptions {
      padding: 20px;
      .el-descriptions-item {
        &__content {
          width: 50%;
          max-height: 100px !important;
          overflow: hidden;
          overflow-y: auto;
        }
      }
    }
  }
</style>
